<template>
    <div class="body" >
  
      <div class="title_big">
        欢迎使用 <span>KK蜡笔</span> 医疗信息管理系统
      </div>
      <div class="title_small">
        Welcome to the KK蜡笔 Medical Information Management System
      </div>
      <div class="clearfix  login_bd">
        <!-- <div class="clearfix form-group">
            <label class="control-label col-3">医院标识： 
              </label>
              <el-input class="el_input"
              placeholder="请输入标识"
              prefix-icon="el-icon-s-help"
              v-model="LableInput"/>
        </div> -->
        <div class="clearfix form-group">
            <label class="control-label col-3">帐    号：
              </label>
              <el-input class="el_input"
              placeholder="请输入标识"
              prefix-icon="el-icon-user-solid"
              v-model="name"/>
        </div>
        <div class="clearfix form-group">
            <label class="control-label col-3">密    码： 
              </label>
              <el-input class="el_input"
              type="password"
              placeholder="请输入标识"
              prefix-icon="el-icon-lock"
              v-model="email"/>
        </div>
        <div class="clearfix form-group">
            <label class="control-label col-3">验证码： 
              </label>
              <el-input class="el_input_" maxlength="4"
              placeholder="验证码不能为空！"
              prefix-icon="el-icon-finished"
              v-model="verify"/>
              <img class="verify js_verify" @click="getNewCode"  :src="codeImageUrl" alt="看不清？换一个！" title="看不清？换一个！">
        </div>
        <div class="clearfix form-group">
            <label class="control-label col-3"> 
              </label>
              <el-radio v-model="radio" label="1">中文简体</el-radio>
            <el-radio v-model="radio" label="2">繁体中文</el-radio>
            <el-radio v-model="radio" label="3">English</el-radio>
        </div>
        <div class="clearfix form-group">
            <label class="control-label col-3"> 
              </label>
              <el-button class="submit_btn" @click="loginBtn" type="primary">登录</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { loginByNameEmail} from '@/api/user';
  
  export default {
    data() {
        return {
            users: [],
            name: 'kevinLuo',
            email: '1164099136@qq.com',
            selected:[],
            radio:'1',
            verify:'',
            LableInput:'',
            codeImageUrl:'https://meis.gzfezx.com/public/verify.html?'
        };
    },
    async created() {
        // 获取用户列表
        if(JSON.parse(localStorage.getItem('loginStorage'))!=null){
          this.$router.replace(
            {name:'homePager'}
          )
        }
    },
    methods: {
      
        getNewCode(){
          this.codeImageUrl = 'https://meis.gzfezx.com/public/verify.html?'+1+Math.random();
        },
        async loginBtn(){
          if(this.name==''){
            this.$message.warning('账号不能为空');
            return
          }
          if(this.email==''){
            this.$message.warning('密码不能为空');
            return
          }
          if(this.verify==''){
            this.$message.warning('验证码不能为空');
            return
          }
          const newUser = await loginByNameEmail({ username: this.name, email: this.email });
          if(newUser.status==200){
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            
            localStorage.setItem('loginStorage',JSON.stringify(newUser))
          }else{ 
            this.$message.error('账号或密码错误');
            return
          }
          
        //   this.$router.push('/home');
          this.$router.replace(
            {name:'homePager'}
          )
        },
        
    },
  };
  </script>
  
  <style>
  body{
    margin: 0;
  }
  </style>
  <style scoped>
  
  .body{
    background-image: url('../../assets/img/login_bg.webp') ;
    /* background-repeat: no-repeat; */
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title_big {
    font-size: 30px;
    line-height: 150%;
    color: #dedede;
    text-align: center;
    font-weight: normal;
  }
  .title_big span{
    display: inline-block;
    padding: 0 15px;
    line-height: 110%;
    font-weight: bold;
    color: #007fbf;
    background: #fff;
    border-radius: 20px;
    font-family: arial;
  }
  .title_small{
    color: #c0c4c6;
    text-align: center;
    font-size: 16px;
  }
  .login_bd{
    margin-top: 30px;
    display: block;
    width: 576px;
    text-align: left;
    padding: 36px 0 15px;
    color: #175b70;
    border: 8px solid rgba(140, 213, 227, 0.288);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.6);
  }
  .clearfix::before{
    display: table;
    content: "";
    line-height: 0;;
  }
  .form-group{
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
  }
  .form-group .el_input{
    width: 58%;
    text-align: left;
  }
  .form-group .el_input_{
    width: 29%;
    text-align: left;
  }
  
  .form-group .control-label{
    padding: 7px 10px 0;
    text-align: right;
  }
  .col-3{
    width: 25%;
  }
  .col-7{
    font-size: 14px;
      font-family: 'Microsoft Yahei';
      text-align: left;
      color: #175b70;
      float: left;
      width: 58.3333% !important;
  }
  .input-icon{
    font-size: 14px;
      font-family: 'Microsoft Yahei';
      text-align: left;
      color: #175b70;
      position: relative;
  }
  .radio_div{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .form-group .submit_btn{
    margin-top: 15px;
    width: 58%;
    font-size: 18px;
    background-color: #007fbf;
  }
  .verify{
    border-radius: 0 2px 2px 0;;
  }
  .js_verify{
    box-sizing: border-box;
      width: 27%;
      height: 40px;
      cursor: pointer;
      border: 1px solid #82b3d4;
      border-left: 1px solid #CCCCCC;
  }
  </style>